<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-content">
        <div class="nav-left">
          <div class="logo">
            <h2>智教易购</h2>
            <span class="logo-subtitle">在线学习平台</span>
          </div>
        </div>
        
        <div class="nav-center">
          <div class="search-container">
            <a-input
              v-model:value="searchKeyword"
              placeholder="搜索课程、讲师、学习内容..."
              size="large"
              @press-enter="handleSearch"
              @input="handleSearchInput"
              @focus="handleSearchFocus"
              @blur="handleSearchBlur"
              class="search-input"
              :allow-clear="true"
            >
              <template #prefix>
                <SearchOutlined />
              </template>
              <template #suffix>
                <a-button
                  type="text"
                  size="small"
                  @click="handleSearch"
                  style="color: rgba(255, 255, 255, 0.6);"
                >
                  <SearchOutlined />
                </a-button>
              </template>
            </a-input>
          </div>
        </div>
        
        <div class="nav-right">
          <div class="nav-actions">
            <!-- 临时管理界面跳转按钮 -->
            <a-button 
              v-if="authStore.isLoggedIn && authStore.isAdmin" 
              @click="goToAdmin" 
              type="primary" 
              size="small"
              style="margin-right: 10px;"
            >
              管理界面
            </a-button>
            
            <template v-if="!authStore.isLoggedIn">
              <a-button type="primary" @click="showLoginModal">
                登录
              </a-button>
              <a-button @click="showRegisterModal">
                注册
              </a-button>
            </template>
            
            <!-- 用户头像下拉菜单 -->
            <a-dropdown v-else trigger="hover" placement="bottomRight">
              <div class="user-avatar-wrapper">
                <a-avatar :src="userAvatar" :size="40" />
                <span class="username">{{ authStore.userInfo?.name }}</span>
                <DownOutlined class="dropdown-arrow" />
              </div>
              <template #overlay>
                <UserDropdown 
                  :user-info="authStore.userInfo || undefined"
                  @go-to-profile="goToUserCenter"
                  @logout="handleLogout"
                />
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>



    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <nav class="nav-menu">
          <div class="nav-section">
            <div class="nav-item" :class="{ active: currentTab === 'recommend' }" @click="switchTab('recommend')">
              <FireOutlined />
              <span>推荐</span>
            </div>
            <div class="nav-item" :class="{ active: currentTab === 'profile' }" @click="switchTab('profile')">
              <UserOutlined />
              <span>我的</span>
            </div>
          </div>
          
          <div class="nav-section">
            <div class="nav-item" :class="{ active: currentTab === 'shop' }" @click="switchTab('shop')">
              <ShoppingOutlined />
              <span>商城</span>
            </div>
          </div>
        </nav>
      </div>

      <!-- 右侧内容区 -->
      <div class="content-area">
        <!-- 个人中心页面 -->
        <ProfilePage 
          v-if="currentTab === 'profile'"
          :user-info="authStore.userInfo || undefined"
          @main-tab-change="handleMainTabChange"
          @sub-tab-change="handleSubTabChange"
        />

        <!-- 商城页面 -->
        <ShopPage 
          v-else-if="currentTab === 'shop'"
          :products="shopProducts"
          :categories="shopCategories"
          @category-change="handleShopCategoryChange"
          @product-view="handleProductView"
        />

         <!-- 推荐视频页面 -->
         <RecommendPage
          v-else-if="currentTab === 'recommend'"
          :products="shopProducts"
          :categories="shopCategories"
          @category-change="handleShopCategoryChange"
          @product-view="handleProductView"
        />
      </div>


    </div>

    <!-- 登录弹窗 -->
    <LoginModal
      v-model:open="loginModalVisible"
      @login-success="handleLoginSuccess"
      @show-register="showRegisterModal"
    />

    <!-- 注册弹窗 -->
    <RegisterModal
      v-model:open="registerModalVisible"
      @show-login="showLoginModal"
      @register-success="handleRegisterSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import { message, notification } from 'ant-design-vue'
import { tagList } from '@/api/user/sysTagController'
import LoginModal from '@/components/auth/LoginModal.vue'
import RegisterModal from '@/components/auth/RegisterModal.vue'
import ShopPage from '@/components/home/ShopPage.vue'
import UserDropdown from '@/components/home/UserDropdown.vue'
import VideoGrid from '@/components/home/VideoGrid.vue'
import ProfilePage from '@/components/home/ProfilePage.vue'
import RecommendPage from '@/components/home/RecommendPage.vue'
import {
  HomeOutlined,
  FireOutlined,
  RobotOutlined,
  HeartOutlined,
  TeamOutlined,
  UserOutlined,
  BookOutlined,
  VideoCameraOutlined,
  TrophyOutlined,
  SearchOutlined,
  DownOutlined,
  ShoppingOutlined
} from '@ant-design/icons-vue'
import axios from 'axios';
import type { number } from 'echarts/core'

const router = useRouter()
const authStore = useAuthStore()

// 搜索相关
const searchKeyword = ref('')

// 获取MinIO文件完整URL的工具函数
const getMinioFileUrl = (filePath?: string): string => {
  if (!filePath) {
    return 'https://via.placeholder.com/32x32'
  }
  
  // 如果已经是完整URL，直接返回
  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
    return filePath
  }
  
  // 否则拼接MinIO基础URL
  const minioUrl = import.meta.env.VITE_MINIO_URL || 'http://172.172.2.99:9000'
  return `${minioUrl}${filePath}`
}

// 用户头像
const userAvatar = computed(() => {
  const avatarUrl = getMinioFileUrl(authStore.userInfo?.filePath || authStore.userInfo?.avatar) || 'https://via.placeholder.com/32x32'
  console.log('计算用户头像URL:', {
    filePath: authStore.userInfo?.filePath,
    avatar: authStore.userInfo?.avatar,
    finalUrl: avatarUrl
  })
  return avatarUrl
})



// 分类数据
const categories = ref([
  { id: 'all', name: '全部' }
])

// 获取分类数据
const fetchCategories = async () => {
  try {
    const result = await tagList()
    if ((result as any).code === '00000' && result.data) {
      // 将后端返回的标签数据转换为分类格式
      const backendCategories = (result.data as any[]).map(tag => ({
        id: tag.id?.toString() || '',
        name: tag.tagName || ''
      }))
      
      // 添加"全部"选项到开头
      categories.value = [
        { id: 'all', name: '全部' },
        ...backendCategories
      ]
    } else {
      console.error('获取分类数据失败:', result)
    }
  } catch (error) {
    console.error('获取分类数据失败:', error)
  }
}


// 弹窗状态
const loginModalVisible = ref(false)
const registerModalVisible = ref(false)

// 当前显示的标签页
const currentTab = ref('home')

// 监听登录状态变化，确保退出登录时切换到首页
watch(() => authStore.isLoggedIn, (isLoggedIn) => {
  if (!isLoggedIn && currentTab.value === 'profile') {
    // 如果用户退出登录且当前在个人中心页面，则切换到首页
    currentTab.value = 'home'
  }
})

// 方法
const handleSearch = () => {
  console.log('搜索:', searchKeyword.value)
  // 这里可以添加实际的搜索逻辑
}

const handleSearchInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  searchKeyword.value = target.value;
  console.log('输入中:', target.value);
};

const handleSearchFocus = () => {
  console.log('搜索框聚焦');
};

const handleSearchBlur = () => {
  console.log('搜索框失焦');
};


const switchTab = (tab: string) => {
  if (tab === 'profile') {
    if (!authStore.isLoggedIn) {
      message.warning('请先登录')
      showLoginModal()
      return
    }
    currentTab.value = 'profile'
  } else {
    currentTab.value = tab
    console.log('切换到标签:', tab)
  }
}

const showLoginModal = () => {
  loginModalVisible.value = true
}

const showRegisterModal = () => {
  registerModalVisible.value = true
}

const handleLoginSuccess = async (user: any) => {
  console.log('登录成功，用户信息:', user)
  
  // 确保用户信息是最新的，特别是头像信息
  if (authStore.isLoggedIn && !user?.filePath) {
    try {
      await authStore.refreshUserInfo()
      console.log('登录成功后刷新用户信息完成，头像路径:', authStore.userInfo?.filePath)
    } catch (error) {
      console.error('登录成功后刷新用户信息失败:', error)
    }
  }
  
  // 只在正常登录时显示欢迎消息，标签选择完成后不显示
  if (user?.fromNormalLogin) {
    notification.success({
      message: '登录成功',
      description: `欢迎回来，${user?.name || '用户'}！`,
      duration: 3
    })
  }
  // 确保登录后显示首页内容
  currentTab.value = 'home'
}

const handleRegisterSuccess = (user: any) => {
  message.success('注册成功！欢迎加入智教易购平台')
  console.log('新注册用户:', user)
  // 注册成功后自动关闭注册弹窗，显示登录弹窗
  registerModalVisible.value = false
  loginModalVisible.value = true
}

const goToUserCenter = () => {
  if (authStore.isLoggedIn) {
    currentTab.value = 'profile'
  } else {
    message.warning('请先登录')
    showLoginModal()
  }
}

const handleLogout = () => {
  authStore.logout()
  // 退出登录后重置当前标签页为首页
  currentTab.value = 'home'
}

const goToAdmin = () => {
  router.push('/admin')
}

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}


const handleShopCategoryChange = (categoryId: number) => {
  console.log('商城分类切换:', categoryId)
}

const handleProductView = (product: any) => {
  console.log('查看商品详情:', product.productName)
  message.success(`正在查看商品详情: ${product.productName}`)
}

const handleMainTabChange = (tabId: string) => {
  console.log('主标签切换:', tabId)
}

const handleSubTabChange = (tabId: string) => {
  console.log('子标签切换:', tabId)
}

//定义返回的商品数据类型
interface ProductRes {
  productId: number;
  sellerUserId: number;
  productName: string;
  price: number;
  status: number;
  mainImage: string;
  createTime: string;
  updateTime: string;
  createBy: string;
  updateBy: string;
  deleted: number;
  stock: number;
  detailImage?: string;
  categoryId: number;
  description?: string;
  sales:  number,          
  rating: number,
}
//定义返回的商品分类数据类型
interface ProductCategoryRes {
  id: number;
  parentId: number;
  name: string;
}
// 响应式商品数组（前端所需结构）
const shopProducts = ref([]); 
// 响应式分类数组（前端所需结构）
const shopCategories = ref([]); 
// 加载状态（用于显示loading动画）
const isLoading = ref(false); 
// 错误信息（请求失败时提示）
const errorMsg = ref(''); 

// 从后端拉取商品数据并映射格式
const fetchProducts = async () => {
  isLoading.value = true;
  errorMsg.value = '';
  
  try {
    // 调用后端接口（替换为实际地址）
    const response = await axios.get('http://localhost:9527/mall/product/undelete');
    
    // 校验后端响应（假设code=00000为成功）
    if (response.data.code !== "00000") {
      throw new Error(`后端错误：${response.data.msg || '未知错误'}`);
    }
    
    // 字段映射：将后端字段转换为前端所需结构
    const mappedProducts = response.data.data.map((item: ProductRes) => ({
      // 后端字段 → 前端字段
      productId: item.productId,               // productId → id
      productName: item.productName,           // productName → name
      description: item.description || '', // 处理null，设为空字符串
      price: item.price,                // 价格直接复用
      mainImage: item.mainImage,            // mainImage → image
      sales:  0,           // 若后端无sales，设默认值0
      rating: 0,         // 若后端无rating，设默认值0
      categoryId: item.categoryId,    // categoryId转字符串（如7 → "7"）
      stock:item.stock,
      detailImage:item.detailImage
    }));
    
    // 赋值给响应式数组
    shopProducts.value = mappedProducts;
    
  } catch (error: unknown) {
  errorMsg.value = (error as Error).message || '数据加载失败，请重试';
  console.error('商品数据拉取失败：', error);
} finally {
    isLoading.value = false;
  }
};

// 从后端拉取商品分类数据并映射格式
const fetchProductsCategory = async () => {
  isLoading.value = true;
  errorMsg.value = '';
  
  try {
    // 调用后端接口（替换为实际地址）
    const response = await axios.get('http://localhost:9527/mall/category/list');
    
    // 校验后端响应（假设code=00000为成功）
    if (response.data.code !== "00000") {
      throw new Error(`后端错误：${response.data.msg || '未知错误'}`);
    }
    
    // 字段映射：将后端字段转换为前端所需结构
    const categories = response.data.data.map((item: ProductCategoryRes) => ({
      id: item.id,               
      parentId: item.parentId,              
      name: item.name,           
    }));
    
    // 赋值给响应式数组
    shopCategories.value = categories; 
    
  } catch (error: unknown) {
  errorMsg.value = (error as Error).message || '数据加载失败，请重试';
  console.error('商品分类数据拉取失败：', error);
} finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  // 初始化认证状态
  authStore.initAuth()
  // 获取所有商品信息
  fetchProducts();
  // 获取所有商品分类
  fetchProductsCategory()
  // 获取分类数据
  fetchCategories()
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
}

/* 顶部导航栏 */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
}

.nav-left .logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo h2 {
  margin: 0;
  color: #ff4757;
  font-size: 20px;
  font-weight: 600;
}

.logo-subtitle {
  font-size: 12px;
  color: #ddd;
}

.nav-center {
  flex: 1;
  max-width: 600px;
  margin: 0 48px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 48px;
}

.search-input {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1000;
}

.search-input :deep(.ant-input) {
  background: transparent !important;
  color: #fff !important;
  pointer-events: auto !important;
  border: none !important;
  box-shadow: none !important;
}

.search-input :deep(.ant-input::placeholder) {
  color: rgba(255, 255, 255, 0.6) !important;
}

.search-input :deep(.ant-input:focus) {
  border: none !important;
  box-shadow: none !important;
}

.search-input :deep(.ant-input:hover) {
  border: none !important;
}

.search-input :deep(.ant-input-suffix) {
  pointer-events: auto !important;
}

.search-input :deep(.ant-btn) {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.search-input :deep(.ant-btn:hover) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.nav-right .nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
  color: #fff;
}

.user-avatar-wrapper:hover {
  background: rgba(255, 255, 255, 0.15);
}

.username {
  font-size: 14px;
  font-weight: 500;
}

.dropdown-arrow {
  font-size: 12px;
  transition: transform 0.3s;
}

/* 用户下拉面板 */
.user-dropdown-panel {
  width: 320px;
  max-height: 600px;
  background: rgba(15, 52, 96, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dropdown-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.dropdown-avatar {
  margin-right: 16px;
}

.dropdown-user-info {
  flex: 1;
}

.dropdown-username {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.dropdown-stats {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #999;
}

.dropdown-sections {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

/* 自定义滚动条样式 */
.dropdown-sections::-webkit-scrollbar {
  width: 6px;
}

.dropdown-sections::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dropdown-sections::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.dropdown-sections::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox 滚动条样式 */
.dropdown-sections {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.dropdown-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
}

.section-header:hover {
  color: #ff6b6b;
}

.section-header .section-count {
  font-size: 14px;
  color: #999;
}

.section-previews {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.preview-item {
  flex: 0 0 auto;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn {
  width: 100%;
  text-align: left;
  color: #fff;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ff6b6b;
}

.user-avatar-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.username {
  font-size: 14px;
  color: #fff;
}

.dropdown-arrow {
  font-size: 12px;
  color: #ddd;
}

.user-dropdown-menu {
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 主内容区域 */
.main-content {
  display: flex;
  margin-top: 64px;
  min-height: calc(100vh - 64px);
}

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  background: rgba(22, 33, 62, 0.9);
  backdrop-filter: blur(15px);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.nav-menu {
  padding: 16px 0;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s;
  color: #ddd;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.nav-item.active {
  background: rgba(255, 71, 87, 0.3);
  color: #ff4757;
  border-right: 3px solid #ff4757;
}

.nav-item span {
  font-size: 14px;
  font-weight: 500;
}

/* 右侧内容区 */
.content-area {
  flex: 1;
  margin-left: 240px;
  padding: 24px;
  max-width: calc(100vw - 240px);
  overflow-x: hidden;
}

/* 个人中心页面 */
.profile-page {
  padding: 24px;
  background: rgba(15, 52, 96, 0.8);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-avatar {
  margin-right: 24px;
}

.profile-info {
  flex: 1;
}

.profile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-name h2 {
  margin: 0;
  font-size: 24px;
  color: #fff;
}

.edit-icon {
  font-size: 18px;
  color: #ff4757;
}

.profile-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #999;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #ff4757;
  border-radius: 50%;
}

.profile-id {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}

.profile-gender {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #999;
}

.gender-icon {
  font-size: 18px;
}

/* 内容标签页 */
.content-tabs {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-tabs {
  display: flex;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-item {
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #ddd;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tab-item.active {
  background: #ff4757;
  color: #fff;
  border-color: #ff4757;
}

.sub-tabs {
  display: flex;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-tabs .tab-item {
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #ddd;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sub-tabs .tab-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sub-tabs .tab-item.active {
  background: #ff4757;
  color: #fff;
  border-color: #ff4757;
}

/* 内容区域 */
.content-display {
  margin-top: 24px;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 18px;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.batch-btn {
  background: #ff4757;
  border-color: #ff4757;
}

.batch-btn:hover {
  background: #ff6b6b;
  border-color: #ff6b6b;
}

.search-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 4px 12px;
}

.content-search :deep(.ant-input) {
  background: transparent;
  color: #fff;
}

.content-search :deep(.ant-input::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.date-filter :deep(.ant-select-selector) {
  background: transparent;
  color: #fff;
}

.date-filter :deep(.ant-select-selector .ant-select-selection-item) {
  color: #fff;
}

.date-filter :deep(.ant-select-selector .ant-select-selection-placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.date-filter :deep(.ant-select-arrow) {
  color: #fff;
}

/* 视频网格 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.video-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.video-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
}

.video-cover {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.video-card:hover .video-cover img {
  transform: scale(1.05);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-card:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 48px;
  color: white;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-content {
  padding: 16px;
}

.video-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creator-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-name {
  font-size: 14px;
  color: #ddd;
}

.video-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}



/* 响应式设计 */
@media (max-width: 1200px) {
  .sidebar {
    width: 200px;
  }
  
  .content-area {
    margin-left: 200px;
    max-width: calc(100vw - 200px);
  }
}

@media (max-width: 768px) {
  .nav-center {
    display: none;
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  
  .sidebar.show {
    transform: translateX(0);
  }
  
  .content-area {
    margin-left: 0;
    max-width: 100vw;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
  }
}
</style>
